<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
</head>
<body>
<h1>WebSocket Client</h1>
<label for="clientId">Client ID: </label>
<input type="text" id="clientId">
<button onclick="connectWebSocket()">Connect</button>
<br>
<label for="message">Message: </label>
<input type="text" id="message">
<button onclick="sendMessage()">Send</button>

<h2>Received Messages:</h2>
<ul id="messageList"></ul>

<script>
    let websocket;

    function connectWebSocket() {
        const clientId = document.getElementById('clientId').value;
        const url = `ws://localhost:8080/custom/${clientId}`;

        websocket = new WebSocket(url);

        websocket.onopen = function(event) {
            console.log('WebSocket connection opened:', event);
        };

        websocket.onmessage = function(event) {
            console.log('WebSocket message received:', event.data);
            displayMessage(event.data);
        };

        websocket.onclose = function(event) {
            console.log('WebSocket connection closed:', event);
        };

        websocket.onerror = function(event) {
            console.error('WebSocket error:', event);
        };
    }

    function sendMessage() {
        const message = document.getElementById('message').value;
        websocket.send(message);
    }

    function displayMessage(message) {
        const messageList = document.getElementById('messageList');
        const listItem = document.createElement('li');
        listItem.textContent = message;
        messageList.appendChild(listItem);
    }
</script>
</body>
</html>
